<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/swiper.css"/>

    <!-- Demo styles -->
    <style>

    </style>

</head>
<body style="background-color:#f7f7f7">
<div id="app" class="container"  v-cloak>
    <div class="home-activityCate" v-for="(content, index) in activities" v-if="activities.length > 0" style="background:white;width:100%;margin-top:10px">
        <div class="home-activityCate-seckill-floor container" v-bind:class="{'top-active':index==0}" style="width:95%;margin:0 auto">
            <div class="home-activityCate-title-wrap" >
                <img :src="content.pic" v-myclick="[content.category_id, getActivityCate]" style="border-radius:10px">
            </div>
            <div :class='"swiper-container"+index' style="padding-top:12px; background-color: white">
                <div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);" >
                    <div class="swiper-slide" v-for="goodslist in content.goods">
                        <li class="home-activityCate-seckill-new-item" v-myclick="[{goods_id:goodslist.goods_id,category_id:content.category_id}, openGoodsInfo]">
                            <div class="home-activityCate-seckill-item-img">
                                <img class="home-activityCate-seckill-photo" v-image-resize="{src:goodslist.new_pic?goodslist.new_pic:goodslist.pic}" style="border-radius:10px">
                            </div>
                            <div class="home-activityCate-seckill-item-text">
                                <span class="home-activityCate-seckill-good-title">{{goodslist.new_title?goodslist.new_title:goodslist.title}}</span>
                                <!-- <span class="home-activityCate-seckill-new-price">券后价  <em>¥</em>{{goodslist.price}}</span> -->
                                <span class="home-activityCate-seckill-new-price" style="text-align:center"><span>¥{{goodslist.price}}</span><del class="home-activityCate-seckill-original-price" style="color:#333"><em>¥</em>{{goodslist.prime}}<hr></del></span>
                                <!-- <del class="home-activityCate-seckill-original-price"><em>¥</em>{{goodslist.prime}}<hr></del> -->
                            </div>
                        </li>
                    </div>
                    <div class="swiper-slide"  >
                        <div class=" home-activityCate-seckill-new-item" v-myclick="[content.category_id, getActivityCate]">
                            <div class="home-activityCate-seckill-item-img">
                                <img class="home-activityCate-seckill-photo" v-image-resize="{src:'../../image/more_good.png'}" >
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <lazy-load style="margin:10px 0;"
            count-per-page="5"
            :arr="activities" :url="url"
            ret-attr="homeactivities"
            >
    </lazy-load>
</div>
</body>
<script src="../../script/vue.js"></script>
<script src="../../script/api.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script src="../../script/components.js"></script>
<script src="../../script/swiper.js"></script>

<script>

    var activities,
        activitylength=0,
        mySwiper = new Array(),
        vm;

    var wx;
    apiready = function () {
        showProgress();
        setBSImg();
        var data = {
            member_id: getPrefs('member_id')
        };
        var callback = function (ret) {
            var home = ret.content;
            activities = home.homeactivities;
            initApp();
            api.parseTapmode();
            swiper();
        };
        pinet.post(URL.getActivityList, data, callback);
        setRefreshHeaderInfo(refresh);
        window.addEventListener('scroll', function(e) {
          if(api.systemType == 'ios'){
            for(var i = 0; i < activitylength; i++){
              mySwiper[i].update();
            }
          }
        });
        addListeners();
    };

    function refresh() {
        var data = {
            member_id: getPrefs('member_id')
        };
        var callback = function (ret) {
            activitylength = 0;
            var home = ret.content;
            activities = home.homeactivities;
            if (vm) {
                vm.activities = home.homeactivities;
                vm.key++;
            } else {
                initApp();
            }
            swiper();
            api.refreshHeaderLoadDone();
        };
        var errback = function () {
            api.refreshHeaderLoadDone();
        };

        pinet.post(URL.getActivityList, data, callback, errback);
    }

    function initApp() {
        vm = new Vue({
            el: "#app",
            data: {
                activities: activities,
                url: URL.getActivityList,
                BSImg: Vue.BSImg,
                key:0
            },
            updated: function() {
              swiper();
            },
            methods: {
                openGoodsInfo: function (infos) {
                    var attributes = {
                        category_id: infos.category_id,
                        goods_id:infos.goods_id
                    };
                    onEvent('t001_c002','活动-分类-商品',attributes);
                    openWin('widget://html/home/goods_info', {goods_id: infos.goods_id,category_id:infos.category_id,buyeventId:'t001_c002_a001',shareventId:'t001_c002_a002',eventLable:'活动-分类-商品',buyshareeventId:'t001_c002_a003'});
                },
                getActivityCate: function (actid) {
                    var attributes = {
                        category_id: actid
                    };
                    onEvent('t001_c001','活动-专题',attributes);
                    openWin('../home/activity', {actid: actid});
                },
            },
        })
    }

    function swiper(){
      if(activities.length > activitylength){
        for(var i = activitylength; i < activities.length; i++)
         mySwiper[i] = new Swiper(('.swiper-container')+i, {
            pagination: '.swiper-pagination',
            slidesPerView: 3,
            paginationClickable: true,
            spaceBetween: 5,
            slidesOffsetBefore : 5,
            freeMode: true
        });
        activitylength = activities.length;
      }
    }

    function addListeners() {
        api.addEventListener({
            name: 'home'
        }, function () {
            refresh();
        });
        
        api.addEventListener({
            name: 'viewappear'
        }, function () {
            onPageStart();
        });

        api.addEventListener({
            name: 'viewdisappear'
        }, function (ret, err) {
            onPageEnd();
        });

        api.addEventListener({
            name: 'keyback'
        }, function (ret, err) {
            onPageEnd();
            api.closeWin();
        });
    }
</script>
</html>
